<template>
    <div>
        <div style="height:calc(100vh);">
            <RelationGraph ref="graphRef" :options="graphOptions" @node-click="onNodeClick" @line-click="onLineClick">
                <template #node="{ node }">
                    <div v-if="node.type === 'my-root-node'" class="my-rg-node my-root-node"><img class="my-image"
                            :src="node.data.imageUrl"></div>
                    <!--    <div v-else-if="node.type === 'my-input-node'" class="my-rg-node">
                        <div class="my-form"><input v-model="node.text">
                            <div style="text-align: left;">Text:{{ node.text }}</div>
                        </div>
                    </div>
                    <div v-else-if="node.type === 'my-color-node'" class="my-rg-node"><input v-model="node.color"
                            type="color"></div> -->
                    <!-- <div v-else-if="node.type === 'my-cool-node'" class="my-rg-node my-cool-node">Not Cool</div> -->
                    <div v-if="node.data.icon" class="c-round" style="width: 70px;height:70px;">
                        <CircumIcon size="70px" :name="node.data.icon" />
                    </div>
                    <div v-if="node.type === 'my-cool-node'" class="my-rg-node my-cool-node">Not Cool</div>
                    <!-- <div v-else class="my-rg-node">{{ node.text }}</div> -->
                </template>
            </RelationGraph>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import CircumIcon from "@klarr-agency/circum-icons-vue"; //
import { ref, onMounted } from 'vue';
import RelationGraph from 'relation-graph-vue3';
import type { RGOptions, RGJsonData, RGNode, RGLine, RGLink, RGUserEvent, RelationGraphComponent } from 'relation-graph-vue3';

const graphRef = ref<RelationGraphComponent | null>(null);
const graphOptions: RGOptions = {
    debug: false,
    defaultJunctionPoint: 'border',
    defaultNodeColor: '#519633',
    defaultLineColor: '#c8d300',
    defaultFocusRootNode: false,
    defaultLineTextOffset_y: -3,
    layout: {
        layoutName: 'center'
    }
    // 这里可以参考"Graph 图谱"中的参数进行设置

};

onMounted(() => {
    showGraph();
});

const showGraph = () => {
    const __graph_json_data: RGJsonData = {
        rootId: 'a',
        nodes: [{ id: 'h', text: 'H', fixed: true, x: 20, y: 20 }, { id: 'g', text: 'G', borderWidth: 1, nodeShape: 1, width: 300, height: 60 },
        { id: 'a', text: 'A', type: 'my-root-node', color: '#c8d300', nodeShape: 0, width: 100, height: 100, data: { imageUrl: 'https://www.relation-graph.com/images/relation-graph-yellow-small.png' } },
        { id: 'b', text: 'B', type: 'my-input-node', nodeShape: 1, fontColor: '#c8d300' },
        { id: 'c', text: 'C', type: 'my-color-node', nodeShape: 1, color: '#519633', width: 80, height: 60 },
        { id: 'e', text: 'E', type: 'my-cool-node', color: 'transparent' },
        { id: 'f', text: 'F', nodeShape: 0, width: 100, height: 100 },
        { id: 'g', text: 'G', nodeShape: 1, width: 100, height: 50 },
        { id: 'a1-1', html: '<span style="color:#ff8c00">Text Node</span>' }, { id: 'e-1', text: 'Rectangular node', nodeShape: 1 },
        { id: 'm1', text: 'M-1' },
        { id: 'm2', text: 'M-2' },
        { id: 'm3', text: 'M-3' },
        { id: 'm4', text: 'M-4' },
        { id: 'c1', text: 'C' },
        { id: 'i', text: 'I' },
        { id: 'x', text: 'X' },
        { id: 'p4', text: 'P-4' },
        { id: 'p3', text: 'P-3' },
        { 'id': 'b11', 'text': 'b', data: { icon: 'fries' } },
        { 'id': 'b1', 'text': 'b1', data: { icon: 'fries' } },
        { 'id': 'b2', 'text': 'b2', data: { icon: 'fries' } },
        { 'id': 'b2-1', 'text': 'b2-1', data: { icon: 'fries' } },
        { 'id': 'b2-2', 'text': 'b2-2', data: { icon: 'fries' } },
        { 'id': 'c1', 'text': 'c1', data: { icon: 'delivery_truck' } },
        { 'id': 'c2', 'text': 'c2', data: { icon: 'delivery_truck' } },
        { 'id': 'c3', 'text': 'c3', data: { icon: 'delivery_truck' } }
        ],
        lines: [
            { from: 'a', to: 'b', text: 'Line Text', color: '#519633' },
            { from: 'a', to: 'a', text: '起点终点一样', color: 'red' },
            { from: 'a', to: 'c', text: 'Line Text' },
            { from: 'a', to: 'a1-1', text: 'Line Text' },
            { from: 'a', to: 'e-1', text: 'Line Text' },
            { from: 'a', to: 'e', text: 'Line Text', },
            { from: 'f', to: 'g', text: '线条样式3', lineShape: 3 },
            { from: 'a', to: 'e', text: '不显示箭头', isHideArrow: true },
            { from: 'e', to: 'p4', text: '这条关系线的文字非常长，它可以顺着这条线走', useTextPath: true, lineShape: 5, color: '#ffd700' },
            { from: 'e', to: 'p4', text: '这条关系线的文字非常长，但不顺着这条线走', lineShape: 5, color: '#ffd700' },
            { 'from': 'a', 'to': 'c1', text: '线条动画1', animation: 1, color: 'red' },
            { 'from': 'a', 'to': 'b11', text: '虚线1', dashType: 1 },
            { 'from': 'b', 'to': 'b1', text: '虚线2', dashType: 2 },
            { 'from': 'b', 'to': 'b2', text: '虚线3', dashType: 3 },
            { 'from': 'b2', 'to': 'b2-1', text: '虚线4', dashType: 4 },
            { 'from': 'b2', 'to': 'b2-2', text: '正常线条' },
            { 'from': 'c', 'to': 'c1', text: '线条动画2', animation: 2 },
            { 'from': 'c', 'to': 'c2', text: '线条动画3', animation: 3 },
            { 'from': 'c', 'to': 'c3', text: '线条动画4', animation: 4 },
            { from: 'a', to: 'h', text: '线和字的颜色不一样', color: 'rgba(30, 144, 255, 1)', fontColor: 'rgba(255, 140, 0, 1)' },
            { from: 'a', to: 'i', text: '折线', lineShape: 4 },
            { from: 'a', to: 'c1', text: '多个关系1', color: 'rgba(30, 144, 255, 1)' },
            { from: 'a', to: 'c1', text: '多个关系2', color: 'rgba(255, 140, 0, 1)' },
            { from: 'c1', to: 'a', text: '多个关系3', color: '#90ee90' },
            { from: 'c1', to: 'm1', text: '样式3', lineShape: 3, color: '#00ced1' },
            { from: 'c1', to: 'm2', text: '样式3', lineShape: 3, color: '#00ced1' },
            { from: 'c1', to: 'm3', text: '样式3', lineShape: 3, color: '#00ced1' },
            { from: 'c1', to: 'm4', text: '样式3', lineShape: 3, color: '#00ced1' },
            { from: 'a', to: 'f', text: 'a-f', color: '#519633', lineShape: 6, fromJunctionPoint: 'border', toJunctionPoint: 'bottom' },
            { from: 'a', to: 'g', text: 'Text 1', color: '#519633', lineShape: 1 },
            { from: 'f', to: 'g', text: 'Text 1', color: '#519633', lineShape: 6, fromJunctionPoint: 'left', toJunctionPoint: 'left' },
            { from: 'i', to: 'x', text: 'Link2', color: 'rgba(255, 120, 0, 1)', lineWidth: 1, data: {} },
            { from: 'a', to: 'b', text: '双向箭头', showStartArrow: true, showEndArrow: true },
            { from: 'x', to: 'i', text: 'Link3', color: 'rgba(0, 206, 209, 1)', lineWidth: 1, lineShape: 1, data: {} },
            { from: 'x', to: 'i', text: 'Link3', color: 'rgba(144, 240, 144, 0.5)', isHideArrow: true, lineWidth: 5, lineShape: 3, data: {} }
        ]
    };
    console.log(graphRef.value);
    const graphInstance = graphRef.value!.getInstance();
    graphInstance.setJsonData(__graph_json_data).then(() => {
        // 这些写上当图谱初始化完成后需要执行的代码

        graphInstance.moveToCenter();
        graphInstance.zoomToFit();
    });
};

const onNodeClick = (nodeObject: RGNode, $event: RGUserEvent) => {
    console.log('onNodeClick:', nodeObject);
};

const onLineClick = (lineObject: RGLine, linkObject: RGLink, $event: RGUserEvent) => {
    console.log('onLineClick:', lineObject);
};


</script>
  
<style lang="scss" scoped>
.my-rg-node {
    display: flex;
    place-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    box-sizing: border-box;

    // .my-form {
    //     padding: 10px;

    //     input {
    //         padding: 2px 5px;
    //         background-color: #c8d300;
    //         color: #519633;
    //         border-radius: 5px;
    //     }
    // }

    img.my-image {
        user-select: none;
        pointer-events: none;
        width: 40px;
        height: 40px;
        animation: rotate 10s linear infinite;
    }
}

.my-root-node {
    // border: #519633 solid 2px;
    // border-radius: 50%;
}

.my-cool-node {
    background-image: linear-gradient(rgba(248, 166, 8, 0.7), rgba(214, 103, 239, 0.7), rgb(168, 85, 247, 0.7));
    border-radius: 30% 90% 70% 30%/30% 30% 70% 90%;
    transform: rotate(-22deg) translateX(0px);
    border: #519633 solid 1px;
}
</style>
<style lang="scss">
.my-line-style-1 .c-rg-line-checked {
    animation: my-line-anm1 1s infinite;
}

.my-line-style-2 .c-rg-line-checked {
    animation: my-line-anm2 1s infinite;
}

.my-line-style-3 .c-rg-line-checked {
    animation: my-line-anm3 1s infinite;
}

.my-line-style-4 .c-rg-line-checked {
    animation: my-line-anm4 1s infinite;
}

@keyframes my-line-anm1 {
    0% {
        stroke-dashoffset: 352px;
        stroke-dasharray: 5, 5, 5;
    }

    50% {
        stroke-dasharray: 5, 5, 5;
        stroke-dashoffset: 3px;
    }

    100% {
        stroke-dashoffset: 352px;
        stroke-dasharray: 5, 5, 5;
    }
}

@keyframes my-line-anm2 {
    from {
        stroke-dashoffset: 0;
        stroke-dasharray: 4, 4, 4;
    }

    to {
        stroke-dashoffset: 10px;
        stroke-dasharray: 20, 20, 20;
    }
}

@keyframes my-line-anm3 {
    0% {
        stroke-opacity: 1;
    }

    50% {
        stroke-opacity: 0.2;
    }

    100% {
        stroke-opacity: 1;
    }
}

@keyframes my-line-anm4 {
    0% {
        stroke-dasharray: 0, 100%;
    }

    100% {
        stroke-dasharray: 100%, 0;
    }
}</style>
